<!-- 个人信息 -->
<template>
	<view class="container">
		<view class="u-flex u-row-between u-p-x-30 info-head u-p-y-20">
			<view class="info-title">签约信息</view>
		</view>
		<view class="user-list">
			<text class="list-name f-b">真实姓名</text>
			<view class="r-input">
				<input class="list-val" v-model="userData.realname" :disabled="editInfoDisabled"
					placeholder="请输入真实姓名" maxlength="32" placeholder-style="color:#c8c9cc;fontSize:28rpx" />
			</view>
		</view>
		<view class="user-list">
			<text class="list-name f-b">身份证号</text>
			<view class="r-input">
				<input class="list-val" v-model="userData.idcardno" :disabled="editInfoDisabled"
					placeholder="请输入身份证号" maxlength="18" placeholder-style="color:#c8c9cc;fontSize:28rpx" />
			</view>
		</view>
		<view class="user-list u-flex u-row-between">
			<text class="list-name f-b">签约手机号</text>
			<view class="r-input">
				<input class="list-val" v-model="userData.signmobile" :disabled="editInfoDisabled"
					placeholder="请输入签约手机号" maxlength="18" placeholder-style="color:#c8c9cc;fontSize:28rpx" />
			</view>
		</view>
		<view class="user-list">
			<text class="list-name f-b">店铺地址</text>
			<view class="r-input">
				<input class="list-val" v-model="userData.sign_address" :disabled="editInfoDisabled"
					placeholder="请输入店铺地址或住址" placeholder-style="color:#c8c9cc;fontSize:28rpx" />
			</view>
		</view>
		<view class="user-list u-m-b-10">
			<text class="list-name f-b">备注</text>
			<view class="r-input">
				<input class="list-val"  v-model="userData.remark" placeholder="请输入备注"
					maxlength="250" placeholder-style="color:#c8c9cc;fontSize:28rpx" />
			</view>
		</view>
		<view class="btn-box u-flex u-row-center u-col-center">
			<button hover-class="hover-logout-btn" class="u-reset-button logout-btn" @tap="editUserInfo">保存</button>
		</view>
	</view>
</template>

<script>
	import {
		mapMutations,
		mapActions,
		mapState
	} from 'vuex';
	import Auth from '@/shopro/permission/index.js';
	import wechat from '@/shopro/wechat/wechat';

	export default {
		components: {},
		data() {
			return {
				platform: this.$platform.get(),
				userData: {},
				showCalendar: false,
				showModal: false,
				editInfoDisabled: false,
				thirdOauthInfo: null //第三方信息
			};
		},
		computed: {
			...mapState({
				userInfo: ({
					user
				}) => user.userInfo,
				authType: ({
					user
				}) => user.authType
			})
		},
		onLoad() {
			this.userData = JSON.parse(JSON.stringify(this.userInfo));
			if (this.userData.signstatus === 2) this.editInfoDisabled = true
			
		},
		methods: {
			...mapActions('user',['getUserInfo', 'showAuthModal', 'logout']),
		
			// 修改信息
			editUserInfo() {
				let that = this;
				if (!that.userData.realname) {
					this.$u.toast('真实姓名不能为空');
					return false;
				}
				if (!that.userData.idcardno) {
					this.$u.toast('身份证号不能为空');
					return false;
				}
				if (!that.userData.signmobile) {
					this.$u.toast('手机号不能为空');
					return false;
				}
				if (!that.userData.sign_address) {
					this.$u.toast('店铺地址不能为空');
					return false;
				}
				// if (!this.$u.test.mobile(that.userData.signmobile)) {
				// 	this.$u.toast('请填写正确的手机号');
				// 	return false;
				// }
				that.$http(
					'user.profile', {
						realname: that.userData.realname,
						idcardno: that.userData.idcardno,
						signmobile: that.userData.signmobile,
						sign_address: that.userData.sign_address,
						remark: that.userData.remark,
					},
					'保存中...'
				).then(res => {
					if (res.code === 1) {
						that.getUserInfo();
						that.editInfoDisabled = true;
						that.$u.toast('保存成功');
					}
				});
			},

		}
	};
</script>

<style lang="scss" scoped>
	// 基本信息
	.info-head {
		.info-title {
			line-height: 60rpx;
			font-size: 28rpx;
			font-weight: 600;
			color: #333333;
		}

		.save-btn {
			color: #fff;
			background: linear-gradient(90deg, rgba(233, 180, 97, 1), rgba(238, 204, 137, 1));
			width: 100rpx;
			border-radius: 30rpx;
			height: 60rpx;
			line-height: 60rpx;
			font-size: 28rpx;
		}

		.dis-btn {
			opacity: 0.5;
		}
	}

	// 三方
	.other-account {
		.head-title {
			line-height: 82rpx;
			font-size: 28rpx;
			font-weight: 600;
			color: #333333;
		}

		.list-img {
			width: 40rpx;
			height: 40rpx;
			margin-right: 10rpx;
		}

		.account-list {
			background-color: #fff;
			height: 100rpx;
			padding: 0 20rpx;

			.info {
				.avatar {
					width: 38rpx;
					height: 38rpx;
					border-radius: 50%;
					overflow: hidden;
				}

				.name {
					font-size: 28rpx;
					font-weight: 400;
					color: #999999;
				}
			}

			.bind-box {
				.bind-btn {
					padding: 0 20rpx;
					line-height: 60rpx;
					background: #f5f6f8;
					border-radius: 20rpx;
					color: #999;
				}

				.relieve-btn {
					border-radius: 20rpx;
					padding: 0 20rpx;
					line-height: 60rpx;
					background: rgba(#ff0000, 0.05);
					color: #ff0000;
				}
			}
		}
	}

	// 个人信息项
	.user-list {
		background: #fff;
		height: 100rpx;
		border-bottom: 1rpx solid #f6f6f6;
		padding: 0 20rpx;
		display:flex;
		justify-content: flex-start;
		align-items: center;

		.list-name {
			font-size: 30rpx;
			width:30%;
		}

		.f-b {
			font-size: 30rpx;
			font-weight: 600;
			color: #cc0000
		}

		.avatar {
			width: 67rpx;
			height: 67rpx;
			border-radius: 50%;
		}

		.cuIcon-right {
			margin-left: 25rpx;
		}

        .r-input{width:100%;}
		.list-val {
			color: #999;
			font-size: 28rpx;
			text-align: left;
			
		}
	}

	.btn-box {
		margin-top: 60rpx;

		.logout-btn {
			width: 710rpx;
			height: 80rpx;
			line-height:80rpx;
			background: #f54141;
			border: 1rpx solid #f54141;
			border-radius: 40rpx;
			font-size: 30rpx;
			font-weight: 500;
			color: #ffffff;
		}

		.hover-logout-btn {
			width: 710rpx;
			height: 80rpx;
			background: #f54141;
			border: 1rpx solid #f54141;
			border-radius: 40rpx;
			font-size: 30rpx;
			font-weight: 500;
			color: #ffffff;
		}
	}
</style>
